<template>
  <div class="bg">
    <my-header backBtn>
      <div slot="title">
        书包定位
      </div>
    </my-header>
    <div class="tishi">
      温馨提示：请选择您要查看信息的宝贝！
    </div>
    <div v-for="item in perlist" class="list-value" >
      <div style="width: 100%;height: 5px;"></div>
      <div class="top" @click="goToMapFn(item)">
        <div style="float: left;width: 2.8rem;height: 2.8rem;margin-top: 0.2rem;margin-left: 15px;">
          <img src="../../../static/img/per_value_t.png" style="width: 2rem;height: 2rem;">
        </div>
        <div style="float: left;margin-left: 0.8rem;" >
          <p style="font-size: 1.8rem;">宝宝姓名：{{item.name}}</p>
        </div>
        <!--<div style="float: left;">

          <input class="weui-input"  type="text" style="height: 2.8rem;font-size: 1.8rem;width: 20rem;">
        </div>-->
      </div>
      <div class="top" @click="goToMapFn(item)">
        <div style="float: left;width: 2.8rem;height: 2.8rem;margin-top: 0.2rem;margin-left: 15px;">
          <img src="../../../static/img/per_value_b.png" style="width: 2rem;height: 2rem;">
        </div>
        <div style="float: left;margin-left: 0.8rem;">
          <p style="font-size: 1.8rem;">书包编号：{{item.gpsCode}}</p>
        </div>
        <!--<div style="float: left;">
          <input class="weui-input" type="text" style="height: 2.8rem;font-size: 1.8rem;width: 20rem;">
        </div>-->
      </div>
      <div v-show="!item.gpsCode" class="top">
        <button @click="bind(item)" style="width: 15rem;height: 3.5rem;background: none;border: green solid 1px;border-radius:3rem;color: green;" >绑定书包</button>
      </div>
      <div v-show="item.gpsCode" class="top">
        <button @click="Dismiss(item)" style="width: 15rem;height: 3.5rem;background: none;border: red solid 1px;border-radius:3rem;color: red;" >解除绑定</button>
      </div>
    </div>
    <div>
      <button @click="addboy" class="weui-btn" style="width: 15rem;background: #36c12d;color: white;font-weight:400;margin-top: 20px;">新增宝宝</button>
    </div>

    <div v-if="modal.visible">
      <div class="weui-mask"></div>
      <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">绑定智能书包</strong></div>
        <div class="weui-dialog__bd"  style="text-align: left">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell__bd baobaoxingming">
              宝宝姓名：{{modal.form.name}}
            </div>
            <div class="weui-cell">

              <div class="weui-cell__bd">
                <input class="weui-input"  v-model="modal.form.gpsCode" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                       placeholder="请输入智能书包编号"/>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-dialog__ft">
          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_default" @click="modal.visible=false">取消</a>
          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_primary sure_color" @click="subFormFn">下一步</a>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "perbinding",
  data(){
    return{
      modal: {
        visible: false,
        form: {
          studentId: '',
          gpsCode: '',
          name:''
        }
      },
      perlist:[]
    }
  },
  methods:{
    goToMapFn(student){
      if(!student.gpsCode){
        this.$weui.topTips('请先绑定书包');
        return;
      }
      this.$http.fetchGpsStatus({gpsCode:student.gpsCode}).then(resp=>{
        if(resp.data) {
          let data = {
            id: student.id,
            lng: student.lng,
            lat: student.lat,
            pertype: true,
            power: resp.data.power,
            locationTime: student.locationTime,
            name: student.name,
            avatar: student.avatar
          }
          this.$router.push({
            path: '/map',
            query: data
          })
        }
      })
    },
    //绑定书包
    bind(rs){
      Object.assign(this.modal, {
        visible: true,
        form: {
          studentId: rs.id,
          gpsCode: '',
          name:rs.name
        }
      })
    },
    //绑定书包
    subFormFn() {
      let code = this.modal.form.gpsCode;
      if (!code) {
        this.$weui.topTips('请输入编号');
        return;
      }
      this.modal.visible = false;
      this.$toast.show('提交中...', 'loading');
      this.$http.bindGps(this.modal.form).then(resp => {
        this.$toast.hide();
        this.$router.go(0);
      }).catch(resp => {
        this.$toast.hide();
      })
    },
    //解绑书包
    Dismiss(rs){
      this.$weui.dialog({
        title: '解绑智能书包',
        content: '您确定要对'+rs.name+'进行书包解除绑操作吗？' ,
        buttons: [{
          label: '取消',
          type: 'default',
        }, {
          label: '确定',
          type: 'primary',
          onClick: () => {
            this.$toast.show('提交中...', 'loading');
            this.$http.unbindGps({studentId:rs.id,gpsCode:rs.gpsCode,gpsName:rs.name}).then(resp => {
              this.$toast.hide();
              this.PersonaluserList();
            }).catch(resp => {
              this.$toast.hide();
            })
          }
        }]
      })
    },
    //跳转增加
    addboy(){
      this.$router.push("/per-regi");
    },
    //获取用户数据
    PersonaluserList(){
      this.$http.fetchPersonalList().then(res=>{
        if(res.data){
          this.perlist = res.data;
        }
      })
    }
  },
  mounted() {
    //获取用户列表
    this.PersonaluserList();
  }
}
</script>

<style scoped>
  .bg{
    width: 100%;
    height: 253px;
    background:url(../../../static/img/bind_bg.png);
  }
  .tishi{
    margin-top: 10px;
    margin-left: 10px;
    text-align: left;
    color: #ef5e63;
  }
  .list-value{
    width: calc(100% - 2rem);
    height: 20rem;
    margin: 1rem auto 1.5rem auto;
    background:url("../../../static/img/per_value_bg.png")no-repeat;
    background-size:100% 100%;
  }
  .top{
    margin-top: 2.5rem;
    width: 100%;
    height: 3rem;
  }
</style>
